<template>
  <view>
    <!-- 头部导航栏 -->

    <!-- 地址信息 -->
    <my-address-edit v-if="addressEditShow"></my-address-edit>
    <view v-if="!formShow&&!addressEditShow">

      <!-- 顶部-头像 区域 -->
      <view class="my-top">
        <view class="top-navigate" style="padding: 53px 5px 15px 5px;width: 100%;">
          <navigator class="content text-black cuIcon-back runner" hover-class="none"
            url="../../subpkg-runner/runner-rush-order/runner-rush-order" open-type="redirect">
          </navigator>
          <view class="text-xl text-black top-navigate-title">个人中心</view>
        </view>
        <view class="runner-info">
          <view class="" @click="changeAvatar">
            <image :src="runnerInfo.avatarUrl" class="my-head-pic">
            </image>
            <view class="cu-tag bg-blue round" style="top: -15px;left: 10px;">金牌骑手</view>
          </view>
          <view class="my-message">
            <view class="my-name text-lg">{{runnerInfo.runnerName}}</view>
            <view class="my-phone text-df">
              {{runnerInfo.runnerPhone? runnerInfo.runnerPhone : ''}}
            </view>
          </view>
          <button class="my-message-edit cu-btn round bg-gray shadow" @click="editRunnerInfoShow">编辑资料</button>
        </view>

      </view>
      <!-- 配送里程 订单数量区域 -->
      <view class="my-main">
        <!-- 配送里程 -->
        <view class="my-delivery-mileage">
          <view class="text-sm" style="margin: 5px 0;">
            配送里程
          </view>
          <view class="text-green text-lg" style="font-weight: 700;">
            {{deliveryMileage || 0}}公里
          </view>
        </view>

        <!-- 订单总数 -->
        <view class="my-all-order">
          <view class="text-df" style="margin: 5px 0;">
            订单总数
          </view>
          <view class="text-green text-xl" style="font-weight: 700;">
            {{orderCount || 0 }}单
          </view>
        </view>
      </view>

      <!-- 我的订单区域 -->
      <view class="cu-list menu sm-border card-menu my-order">
        <!-- 我的订单 -->
        <view class="cu-item arrow" @click="gotoMyOrder">
          <view class="content">
            <text class="cuIcon-cartfill text-orange"></text>
            <text class="text-grey">我的订单</text>
          </view>
        </view>

        <!--地址管理 -->
        <view class="cu-item arrow" @click="revenueInquiry">
          <view class="content">
            <text class="cuIcon-locationfill text-olive"></text>
            <text class="text-grey">收入查询</text>
          </view>
        </view>

        <!-- 清理缓存 -->
        <view class="cu-item arrow">
          <view class="content">
            <text class="cuIcon-warn text-orange"></text>
            <text class="text-grey">清理缓存</text>
          </view>
          <view class="action">
            <text class="text-grey text-sm">11.08MB</text>
          </view>
        </view>

        <!-- 关于我们 -->
        <view class="cu-item">
          <view class="content">
            <text class="cuIcon-settingsfill text-green"></text>
            <text class="text-grey">关于我们</text>
          </view>
        </view>
      </view>
      <button class="cu-btn round bg-red margin-top logout-btn" @click="logout">退出</button>
      <view style="padding-bottom: 80px;"></view>
    </view>
    <!-- 用户信息编辑表单 -->
    <runnerinfo-form v-if="formShow" :runnerInfo="runnerInfo"></runnerinfo-form>

  </view>

</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    name: "runner-person-center",
    data() {
      return {
        formShow: false,
        addressEditShow: false,
      };
    },
    computed: {
      ...mapState('m_runner', ['runnerInfo', 'orderList']),
      orderCount() {
        return this.orderList.length;
      },
      deliveryMileage() {
        const finishedList = this.orderList.filter((item) => item.finished);
        let sum=0;
        finishedList.map((item) => {
          if(item.orderInfo.distance){
            sum += Number.parseFloat(item.orderInfo.distance);
          }else{
            sum += 1000;
          }
        })
        return sum/1000
      }
    },
    methods: {
      ...mapMutations('m_runner', ['clearAllState', 'updateOrderList']),
      ...mapActions('m_runner', ['changeRunnerAvatar', 'getAllOrderList']),
      async logout() {
        const res = await uni.showModal({
          title: '提示',
          content: '确定退出登录吗？'
        });
        if (res.errMsg === "showModal:ok" && res.confirm) {
          uni.clearStorageSync();
          this.clearAllState();
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      },
      revenueInquiry(){
        uni.navigateTo({
          url: '/subpkg-runner/search/search'
        })
      },
      async gotoMyOrder() {
        uni.navigateTo({
          url: '/subpkg-runner/runner-order/runner-order?runnerId=' + this.runnerInfo._id
        })
        // this.updateOrderList(res.data)s
      },
      editRunnerInfoShow() {
        this.formShow = true
      },
      //修改头像
      //点击上传商品图片事件
      changeAvatar() {
        const that = this;
        uni.showActionSheet({
          itemList: ['从相册选择', '拍照'], // 显示的操作列表
          success: function(res) {
            if (!res.cancel) {
              if (res.tapIndex === 0) {
                // 用户选择了从相册选择
                uni.chooseImage({
                  count: 1, //默认9
                  sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                  sourceType: ['album'], //从相册选择
                  success: async (res) => {
                    console.log(res);
                    //上传图片
                    await that.uploadAvatar(res.tempFilePaths[0])
                  }
                });
              } else if (res.tapIndex === 1) {
                // 用户选择了拍照
                uni.chooseImage({
                  count: 1,
                  sourceType: ['camera'], // 拍照
                  success: async function(chooseRes) {
                    // 用户拍照后的处理逻辑
                    console.log(chooseRes.tempFilePaths);
                    await that.uploadAvatar(chooseRes.tempFilePaths[0])
                  }
                });
              }

            }
          }
        });
      },
      //上传图片操作
      async uploadAvatar(filePath) {
        //进行上传图片操作
        const result = await uniCloud.uploadFile({
          filePath: filePath,
          cloudPath: 'runner-avatar-new' + this.runnerInfo.runnerPhone + '.png',
        });
        console.log(result.fileID);
        const runner = this.runnerInfo;
        runner.avatarUrl = result.fileID
        const {
          result: res
        } = await this.changeRunnerAvatar(runner)
        if (res.updated === 1) uni.$showMsg('上传成功')
        console.log(res);
      },
    },

  }
</script>

<style lang="scss">
  page {
    background-color: #ecfdfa;
  }

  .my-top {
    // background-image: url('https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/swiper-img/sw1.png');
    background-color: #2aba66;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .top-navigate {
      display: flex;
      justify-content: left;
      align-items: center;

      .top-navigate-title {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-weight: bold;
      }

      .runner {
        font-size: 45rpx;
        margin: 0 10px;
        font-weight: 700;
      }
    }

    .runner-info {
      display: flex;
      align-items: center;
      padding: 0px 20px 30px;

      .my-head-pic {
        position: relative;
        display: block;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        box-shadow: 0 1px 5px black;
        margin-right: 20px;
      }

      .my-message {
        width: 100px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-right: 20px;
      }

      .my-message-edit {
        width: 120px;
      }
    }


  }

  .my-main {
    position: relative;
    width: 90%;
    height: 100px;
    top: -30px;
    left: 0;
    margin: 0 auto;
    background-color: white;
    border-radius: 20px;
    border: 1px solid silver;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .my-delivery-mileage {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .my-all-order {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

  }

  .my-order {
    position: relative;
    top: -15px;
  }


  .switch-sex::after {
    content: "\e716";
  }

  .switch-sex::before {
    content: "\e7a9";
  }

  .logout-btn {
    height: 35px;
    width: 90%;
    margin: 20px;
  }
</style>